<template>
  <div>
    <ConTitle :info="topTitle"/>
    <!-- 2.设备概览、监控、公告 -->
    <div class="device">
      <Device class="de-left"></Device>
      <!-- 公告 -->
      <Public class="de-right"></Public>
    </div>
    <!--3.图表-->
    <Chart class="chart-con"></Chart>
  </div>
</template>

<script>

import ConTitle from "@/components/ConTitle.vue";
import Device from "./components/Device.vue";
import Public from "./components/Public.vue";
import Chart from "./components/Chart.vue";
export default {
  name: "dashboard",
  data() {
    return {
      topTitle:{
        type:"",
        text:"仪表盘",
        msg:"设备概览和传感数据可视化。"
      },
    };
  },
  components:{
    Device,
    ConTitle,
    Public,
    Chart
  },
};
</script>

<style scoped lang="scss">
.device {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;

  .de-left {
    width: 75%;
    margin-right: 10px;
    flex: 1;
    display: flex;

    .c-l {
      width: 60%;
      margin-right: 10px;
      flex: 1;
    }

    .c-r {
      width: 30%;
    }
  }

  .de-right {
    background: lightseagreen;
    width: 20%;
    .clearfix span {
      font-weight: bold;
    }
    .senseCap1 i,.senseCap2 i{
      color: #5daf34;
      font-size: 16px;
    }
  }
}



.jiankong {
  display: flex;
  justify-content: space-between;
  text-align: center;
  font-weight: bold;
}

.jiankong div {
  padding-top: 7px;
}

.img1 {
  width: 50px;
  height: 100px;
}

.line {
  border: 1px solid gray;
  background: gray;
  width: 1px;
}

.text-item {
  font-weight: bold;
}

.text-item div {
  margin-top: 10px;
}

.text-item .gateway {
  display: inline-block;
  width: 40px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 20px;
  background: #ddf0e0;
  color: #64ac9b;
  margin-left: 260px;
}

.text-item .sensor {
  display: inline-block;
  width: 40px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 20px;
  background: #fbdadb;
  color: #f38e80;
  margin-left: 229px;
}
</style>